<template>
    <div class="building" v-if="bannerdata && initdata && inlist">
        <search :isShow="false" />
        <!-- 全部商品分类 -->
        <div class="banner">
            <div class="banner-classify">
                <p class="classify-title">
                    全部商品分类
                    <Icon class="ios-arrow-down" type="ios-arrow-down"></Icon>
                </p>
                <div class="banner-dropdown">
                    <ul>
                        <li v-for="(items,index) in initdata" :key="index">
                            <div class="menu-content">
                                <span class="jurz" @click="producone(items.proTypeOne.productTypeId,items.proTypeOne.type)">{{items.proTypeOne.name}}</span>
                                <Icon class="ios-arrow-right" type="ios-arrow-right"></Icon>
                            </div>
                            <div class="menu-list">
                                <div class="item" v-for="(item) in items.productTypeResults" :key="item.id">
                                    <p class="title" @click="producone(item.proTypeTwo.productTypeId,item.proTypeTwo.type)">{{item.proTypeTwo.name}}</p>
                                    <div class="list">
                                        <span v-for="(ite,index) in item.proTypeThrees" :key="index" @click="producone(ite.productTypeId,ite.type)">{{ite.name}}</span>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="menu">
                <ul>
                    <li><router-link to="/index">首页</router-link></li>
                    <li class="active"><router-link to="/building">建材商城</router-link></li>
                    <li><router-link to="furniture">家居商城</router-link></li>
                    <li><router-link to="/brand">品牌活动</router-link></li>
                    <li>
                        <a href="http://www.zhuolukeji.com/salesPrograms.html" target="_blank">整包方案</a>
                    </li>
                    <li @click="modelShow=true">户型</li>
                </ul>
            </div>
        </div>
        <!-- 轮播图 -->
        <div class="ivue-banner">
            <Carousel autoplay v-model="value1" arrow="never" loop>
                <Carousel-item class="bannerground" v-for="item in bannerdata" :key="item.id">
                    <div class="demo-carousel" :style="`background-image:url(${item.pictureUrl})`"></div>
                </Carousel-item>
            </Carousel>
        </div>
        <!-- 瓷砖 -->
        <div class="ware-box">
            <div class="ware">
                <div class="category" v-for="items in inlist" :key="items.id">
                    <div class="title">
                        <p class="title-text">{{items.labelConfig.modelName}}</p>
                        <p class="more" @click="producone(items.labelConfig.proTypeId,items.labelConfig.labelType)">更多
                            <Icon class="ios-more-right" type="ios-arrow-right"></Icon>
                            <Icon class="ios-right" type="ios-arrow-right"></Icon>
                        </p>
                    </div>
                    <div class="category-list">
                        <div class="class" :style="`background-image:url(${items.labelConfig.pictureUrl})`" @click="producone(items.labelConfig.proTypeId,items.labelConfig.labelType)">
                            <p class="pone">{{items.labelConfig.modelName}}</p>
                            <p class="ptwo">{{items.labelConfig.description}}</p>
                        </div>
                        <div class="good-picture"  v-for="(item,index) in items.productInfos" :key="index" @click="gooddetail(item.productId)">
                            <div class="data-shadow">
                                <div class="data">
                                    <div class="smallclass-picture" :style="`background-image:url(${item.mstImgUrl})`"></div>
                                    <div class="good-title">
                                        <div class="inner">
                                            <p>{{item.proName}}</p>
                                            <span class="model">{{item.defProModel}}</span>
                                            <p class="model-price">¥{{item.salesPrice}}</p>
                                        </div>
                                        <!-- hover底部 -->
                                        <div class="data_info">
                                            <div class="good-mask">
                                                <p>成交量：{{item.salesCount}}</p>
                                                <span>{{item.brandName}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <model :visible.sync="modelShow" content="浏览VR户型需要下载客户端"></model>
    </div>
</template>
<script>
import Search from "../components/search.vue";
import Model from "../components/modal.vue";
import { Icon, Carousel, CarouselItem, } from 'iview';
import { bannerList,initProductList,initProductType} from "../http/api.js";
export default {
    components: {
        Icon,
        Carousel,
        CarouselItem,
        Search,
        Model
    },
    data() {
        return {
            value1: 0,
            modelShow: false,
            bannerdata:null,//轮播图数据
            initdata:null,  //类目数据
            inlist:null,   //商品导航数据
        };
    },
    methods: {
        api_building() {
            //轮播图接口
            bannerList({bannerType:1,isEnable:1,facilityType:1}).then(res =>{
                // console.log(res)
                this.bannerdata = res.data.banners
            })
            // 类目初始化接口
            initProductType().then(response =>{
                // console.log(response)
                this.initdata = response.data.productTypeResults
            })
            // 商品导航展示接口
            initProductList({labelType:1}).then(respon =>{
                // console.log(respon)
                this.inlist = respon.data.initPrpductResult
            })
        },
        //跳转类目
        producone (id,type) {
            this.$router.push({path:"/classificationlist",query:{productTypeId:id,type:type}})
        },
        //跳转详情页
        gooddetail (id) {
            this.$router.push({path:"/gooddetail",query:{productId:id}})
        }
    },
    created () {
        this.api_building()
    }
};
</script>
<style lang="less">
@import "../assets/styles/building.less";
</style>
